<template>
  <el-form :model="nodeModalForm"
           ref="nodeModal"
           label-placement="left"
           label-width="140px"
           :rules="nodeModalRules"
           size="small">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="节点名称"
                      prop="nodeName">
          <el-input v-model.trim="nodeModalForm.nodeName"></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="替换列"
                      prop="column">
           <el-select v-model="nodeModalForm.column"
                     filterable
                     placeholder="替换列"
                     class="fixed-icon w_100">
              <el-option v-for="item in fieldsList"
                          :key="item.alias"
                          :label="item.alias"
                          :value="item.alias">
                <span style="float: left">{{ item.alias }}</span>
                <span style="float: right;color: var(--el-text-color-secondary);font-size: 13px;">{{
                    item.DATA_TYPE
                  }}</span>
              </el-option>
          </el-select>
        </el-form-item>
      </el-col>
         </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="结果写入方式"
                      prop="deleteRows">
          <el-select v-model="nodeModalForm.deleteRows"
                     filterable
                     placeholder="结果写入方式"
                     class="fixed-icon w_100">
            <el-option :value="true"
                       label="新建列"></el-option>
            <el-option :value="false"
                       label="覆盖原始列的值"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12"
              v-if="nodeModalForm.deleteRows">
        <el-form-item label="新列别名"
                      prop="alias">
          <el-input v-model.trim="nodeModalForm.alias"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="不满足替换规则的值"
                      prop="isDefault">
          <el-select v-model="nodeModalForm.isDefault"
                     filterable
                     placeholder="设置不满足替换规则的值"
                     class="fixed-icon w_100">
            <el-option label="使用一个默认值"
                       :value="false"></el-option>
            <el-option label="使用原有的值"
                       :value="true"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" v-if="nodeModalForm.isDefault">
        <el-form-item label="默认替换值"
                      prop="defaultValue">
          <el-input v-model.trim="nodeModalForm.defaultValue"></el-input>
        </el-form-item>
      </el-col>
    </el-row>
    <table border="1"
           align="center"
           class="add_table w_100"
           cellspacing="0">
      <tr>
        <th width="70">
          <span class="iconfont icon-Add cursor_point"
                @click="handleAddChange"></span>
        </th>
        <th>原值</th>
        <th>替换值</th>
      </tr>
      <tr v-for="(item, index) in nodeModalForm.change"
          :key="index">
        <td width="70">
          <span class="iconfont icon-Add cursor_point px_2"
                @click="handleAddChange(index)"></span>
          <span class="iconfont icon-close cursor_point px_2"
                @click="handleDeleteChange(index)"></span>
        </td>
        <td>
          <el-input v-model.trim="item.origin"></el-input>
        </td>
        <td>
          <el-input v-model.trim="item.change"></el-input>
        </td>
      </tr>
    </table>
    <div class="nodeModal-footer">
      <span class="dialog-footer">
        <el-button plain
                   @click="handleConfigCancel">取消</el-button>
        <el-button type="primary"
                   @click="handleConfigConfirm">更新</el-button>
      </span>
    </div>
  </el-form>
</template>

<script>
import { computed, defineComponent, inject, onMounted, ref } from 'vue'
import { useEtlStore } from '../../../../../store/flowEtl'

export default defineComponent({
  name: 'node-config-change',
  props: {
    node: Object,
  },
  components: {},
  setup(props, ctx) {
    const etlStore = useEtlStore()
    const nodeList = computed(() => etlStore.nodeList)
    const nodeConfigClose = inject('nodeConfigClose')
    const change = ref([])
    const fieldsList = ref([])
    const nodeModalForm = ref({
      nodeName: '',
      column: '',
      deleteRows: false,
      alias: '',
      isDefault: true,
      defaultValue: '',
      change: [],
    })
    const nodeModal = ref()
    const tableLoading = ref(false)
    const nodeModalRules = ref({
      nodeName: {
        required: true,
        message: '请输入数据源名称',
        trigger: 'blur',
      },
    })
    const handleConfigCancel = () => {
      nodeConfigClose()
    }
    const nodeConfigUpdate = (node) => {
      let nodes = [...nodeList.value].map((item) => {
        if (item.id === node.id) {
          item.status = true
          item.nodeName = node.nodeName
          item.config.column = node.column
          item.config.deleteRows = node.deleteRows
          item.config.alias = node.alias
          item.config.isDefault = node.isDefault
          item.config.defaultValue = node.defaultValue
          item.config.change = node.change
        }
        return item
      })
      etlStore.setNodeList(nodes)
      nodeConfigClose()
    }
    const handleConfigConfirm = () => {
      nodeModal.value.validate((valid) => {
        if (valid) {
          nodeConfigUpdate(nodeModalForm.value)
        } else {
          return false
        }
      })
    }
    const resetForm = () => {
      nodeModalForm.value = {
        nodeName: '',
        column: '',
        deleteRows: false,
        alias: '',
        isDefault: true,
        defaultValue: '',
        change: [],
      }
      fieldsList.value = []
    }
    const handleAddChange = (index) => {
      if (index) {
        nodeModalForm.value.change = [...nodeModalForm.value.change.splice(0, index + 1), {
         origin: '',
         change: '',
        }, ...nodeModalForm.value.change.splice(index - 1, nodeModalForm.value.change.length)]
      } else {
        nodeModalForm.value.change.push({
          origin: '',
          change: '',
        })
      }
    }
    const handleDeleteChange = (index) => {
      nodeModalForm.value.change.splice(index, 1)
    }
    onMounted(() => {
      resetForm()
      fieldsList.value = props.node.originFields
      nodeModalForm.value = {
        nodeName: props.node.nodeName,
        column: props.node.config.column,
        deleteRows: props.node.config.deleteRows || false,
        alias: props.node.config.alias,
        isDefault: props.node.config.isDefault || false,
        defaultValue: props.node.config.defaultValue,
        change: props.node.config.change || [],
      }
    })
    return {
      nodeList,
      tableLoading,
      nodeModalForm,
      fieldsList,
      nodeModalRules,
      nodeModal,
      resetForm,
      handleConfigCancel,
      handleConfigConfirm,
      nodeConfigUpdate,
      handleAddChange,
      handleDeleteChange,
      nodeConfigClose,
    }
  },
})
</script>

<style lang="less" scoped>
.nodeModal-footer {
  padding: var(--el-dialog-padding-primary);
  padding-top: 10px;
  text-align: right;
  box-sizing: border-box;
}
</style>
